<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "02283a5b1e20583380c2920e1fd0fe92", // 应用生成的秘钥
};
window.AMap_Config = {
  offline: true,
  offlineResourcePath: '/amap-offline-resources/', // 离线资源路径
  offlineTilePath: '/amap-offline-resources/tiles/', // 离线瓦片路径
  offlineKey: '你的离线key',
};

const map = ref();
let AMap: any = null;
const markers = ref([]);
// const state = reactive({
//   map: null
// });

//信息窗口
const onpenWindow = (data: any, position: any) => {
  //这里的数据 可能需要调接口返回
  let content = `<div class="info-content">
        <div class="close-btn">关闭</div>
       <div><strong>医院名称</strong>:${data.name}</div>
       <div><strong>医院地址</strong>:${data.address}</div>
      </div>`;
  let infoWindow = new AMap.InfoWindow({
    isCustom: true, //使用自定义窗体
    content: content, //传入字符串拼接的 DOM 元素
    anchor: "top-left",
  });
  infoWindow.open(map.value, position);
  // 添加关闭按钮事
  setTimeout(() => {
    var closeBtn: any = document.querySelector(".close-btn");
    if (closeBtn) {
      closeBtn.onclick = function () {
        infoWindow.close();
      };
    }
  }, 300);

};

// 批量添加点标记
const addPoints=()=>{
  
    // 模拟批量点数据  可能需要调接口
  const points = [
    {
      lnglat: [116.287718, 40.148611],
      name: "沙河医院",
      id: 1,
      address: "北京昌平沙河镇",
    },
    {
      lnglat: [116.288052, 40.148338],
      name: "小汤山医院",
      id: 2,
      address: "北京昌平于新庄村",
    },
  ];

  // 创建样式
  const style = {
    url: "./img/hos.png",
    anchor: new AMap.Pixel(15, 15),
    size: new AMap.Size(30, 30),
  };
  // 创建海量点对象
  const massMarks = new AMap.MassMarks(points, {
    style: style,
    zIndex: 99999,
  });

  // 将海量点添加到地图
  massMarks.setMap(map.value);
  // 点击事件
  massMarks.on("click", (e: any) => {
    onpenWindow(e.data, e.data.lnglat);
    console.log("点击了", e);
  });

}

const initMap = async () => {
  AMap = await AMapLoader.load({
    key: "bd82dc0df61a386c2cff10100c21b25b", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Marker", "AMap.InfoWindow", "AMap.MassMarks"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).catch((e) => {
    console.log(e);
  });

  map.value = new AMap.Map("container", {
    // 设置地图容器id
    viewMode: "3D", // 是否为3D地图模式
    zoom: 17, // 初始化地图级别
    center: [116.288865, 40.148278], // 初始化地图中心点位置
  });

  //调用添加批量点标记
  addPoints();

  //添加点标记
  //   const position = new AMap.LngLat(116.28775, 40.148554); // Marker经纬度
  //   const marker = new AMap.Marker({
  //     position: position,
  //     content:
  //       "<div class='marker'><img style='width:30px;height:30px' src='./img/hos.png'></div>",
  //     offset: new AMap.Pixel(-15, -15), // 以 icon 的 [center bottom] 为原点
  //   });

  //   //信息窗口
  //   let infoWindow = new AMap.InfoWindow({
  //     content: "", //传入字符串拼接的 DOM 元素
  //     anchor: "top-left",
  //   });

  //   marker.on("click", function (e) {
  //     let content = `<div class="info-content">
  //          <div><strong>医院名称</strong>:沙河医院</div>
  //          <div><strong>医院地址</strong>:北京昌平沙河镇</div>
  //         </div>`;

  //     infoWindow.setContent(content);
  //     infoWindow.open(map.value, e.target.getPosition());
  //   });

  //   map.value.add(marker);

  //批量添加点标记

  

  //  // 批量创建标记
  //  markers.value = points.map(point => {

  //   const marker = new AMap.Marker({
  //     position: point.lnglat,
  //     content: `<div class="marker"><img style='width:30px;height:30px' src='./img/hos.png'></div>`,
  //     offset: new AMap.Pixel(-13, -30)
  //   });

  //   marker.on('click', (e) => {
  //        console.log(point,e);
  //   });

  //   return marker;
  // });

  // // 批量添加到地图
  // map.value.add(markers.value);
};
onMounted(() => {
  initMap();
});

onUnmounted(() => {
  map.value && map.value.destroy();
});
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 100vh;
}
</style>
<style>
.info-content {
  width: 300px;
  height: 100px;
  border: solid 2px #ff0000;
  background: #ffffff;
}
</style>
